<template>
  <div class="container">
    <el-dialog v-model="state.dialog.isShowDialog" :title="state.dialog.titleObj[state.dialog.type]"
      label-position="top" width="800px">
      <el-form ref="dialogFormRef" :model="state.ruleForm" :rules="state.rules" label-width="auto">
        <el-form-item label="订单号:" prop="order_id">
          <el-input v-model="state.ruleForm.order_id" placeholder="请输入" clearable :disabled="isDisabledFn" />
        </el-form-item>
        <el-form-item label="运单号:" prop="tracking_number">
          <el-input v-model="state.ruleForm.tracking_number" placeholder="请输入" clearable :disabled="isDisabledFn" />
        </el-form-item>
        <el-form-item label="物流公司:" prop="carrier_company">
          <el-input v-model="state.ruleForm.carrier_company" placeholder="请输入" clearable :disabled="isDisabledFn" />
        </el-form-item>
        <el-form-item label="物流成本:" prop="logistics_cost">
          <el-input v-model="state.ruleForm.logistics_cost" placeholder="请输入" clearable :disabled="isDisabledFn" />
        </el-form-item>
        <el-form-item label="物流是否运输货损:" prop="is_damaged">
          <el-radio-group v-model="state.ruleForm.is_damaged">
            <el-radio v-for="(item, index) in state.yesOrNot" :key="index" :label="item.value">
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="物流是否赔偿:" prop="is_compensation">
          <el-radio-group v-model="state.ruleForm.is_compensation">
            <el-radio v-for="(item, index) in state.yesOrNot" :key="index" :label="item.value">
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template v-if="!isDisabledFn" #footer>
        <span class="dialog-footer">
          <el-button @click="onCancel" size="default">取 消</el-button>
          <el-button type="primary" size="default" @click="onSubmit">保 存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="addLogistics">
import { reactive, onMounted, computed } from 'vue';
import { addLogistics, editLogistics } from '/@/api/logistics/index';
import { clueTypeArr, yesOrNot, accountStatusArr, navArr } from '/@/commmon/variate';
import { ElMessage } from 'element-plus';

const emit = defineEmits(['updateList']);
const state = reactive({
  clueTypeArr: clueTypeArr,
  clueStatusArr: navArr.slice(1),
  accountStatusArr: accountStatusArr,
  yesOrNot: yesOrNot,
  ruleForm: {
    order_id: '',
    tracking_number: '',
    carrier_company: '',
    logistics_cost: '',
    is_damaged: 1,
    is_compensation: 1,
  },
  rules: {
    order_id: [
      { required: true, message: '请输入订单号', trigger: 'blur' },
    ],
    tracking_number: [
      { required: true, message: '请输入运单号', trigger: 'blur' },
    ],
    carrier_company: [
      { required: true, message: '请输入物流公司', trigger: 'blur' },
    ],
  },
  dialog: {
    isShowDialog: false,
    row: null,
    type: '',
    titleObj: {
      'view': '查看',
      'edit': '编辑',
      'add': '新增'
    },
    isDisabled: false
  },
  loading: false,
  originalFiles: {},
})
const onSubmit = async () => {
  if (!state.ruleForm.order_id || state.ruleForm.order_id.trim() === '') {
    ElMessage.error('请输入订单号');
    return;
  } else if (!state.ruleForm.tracking_number || state.ruleForm.tracking_number.trim() === '') {
    ElMessage.error('请输入运单号');
    return;
  } else if (!state.ruleForm.carrier_company || state.ruleForm.carrier_company.trim() === '') {
    ElMessage.error('请输入物流公司');
    return;
  }
  const params = {
    ...state.ruleForm,
  }
  console.log(params, "params");

  if (state.dialog.type === 'add') {
    addLogistics(params).then((res) => {
      if (res.code === 10000) {
        onCancel()
        emit('updateList')
        ElMessage.success(res.msg);
      }
    })
  } else {
    editLogistics(params).then((res) => {
      if (res.code === 10000) {
        onCancel()
        emit('updateList')
        ElMessage.success(res.msg);
      }
    })
  }
}

const openDialog = (type, row) => {
  const typeArr = ['edit', 'view'];
  state.dialog.row = row;
  state.dialog.type = type;
  closeDialog();
  if (row && typeArr.includes(type)) {
    state.ruleForm = {
      ...state.ruleForm,
      id: row.id,
      order_id: row.order_id,
      tracking_number: row.tracking_number,
      carrier_company: row.carrier_company,
      logistics_cost: row.logistics_cost,
      is_damaged: row.is_damaged,
      is_compensation: row.is_compensation,
    }
  }
  state.dialog.isShowDialog = true;
};

const closeDialog = () => {
  state.ruleForm = {
    order_id: '',
    tracking_number: '',
    carrier_company: '',
    logistics_cost: '',
    is_damaged: 1,
    is_compensation: 1,
  }
};

const onCancel = () => {
  closeDialog();
  state.dialog.isShowDialog = false;
};

onMounted(() => { })
const isDisabledFn = computed(() => {
  return state.dialog.type === 'view'
})
defineExpose({
  openDialog,
})
</script>
<style scoped lang="scss">
.dialog-footer {
  display: flex;
  align-items: center;
  justify-content: center;
}

:deep(.el-form-item__content) {
  display: block;
}
</style>
